<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { objextend } from '@/js/function.js'
import { config_default, grid_default } from './config.js'
import moduleEdit from './module-edit.vue'

import { store } from '@/js/store.js'
import modeUpimg from '@/components/mode-upimg.vue';
import myselect from '../select.vue'

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)



const upOptions = ref({width:150,height:80, upDisable:true,noClose:true,fit:'cover',active:-1})

var imgid = 0;
config.value.list.forEach(ele => {
    if(ele.imgid>imgid){
        imgid = ele.imgid;
    }
});
function onAddimg(item) {
    imgid++;
    item.img = imgid;
    config.value.list.push({ url: 'images/icon-pic.svg', link: '', name: '图片', type:"", imgid: imgid })
}

function onDel(imgid) {
    const index = config.value.list.findIndex(ev=>ev.imgid==imgid)
    index>-1 && config.value.list.splice(index, 1)
    gridActive.value = -1;
}

function onAcitve(imgid) {
    const index = config.value.list.findIndex(ev=>ev.imgid==imgid)
    upOptions.value.active = index;
}

function rowSize(val) {
    gridActive.value = -1;
    imgid = 0;
    config.value.list = [];
    var col=0,row=0,len=val*val,arr=[];
    for(var i=0;i<len;i++){
        var obj = {col:col,row:row,use:false,size:[1,1]}
        arr.push(obj)
        col++;
        if(col>=val){
            col=0;
            row++;
        }
    }
    config.value.grid = arr;
}

const gridActive = ref(-1)
function onGridDefault(index) {
    imgid = 0;
    gridActive.value = index;
    const grid = JSON.parse(JSON.stringify(grid_default[index]))
    config.value.row = grid.row;
    config.value.list = grid.list
    config.value.grid = grid.grid
}

</script>

<template>


    <el-form :model="config">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <el-form-item label="默认配置">
            <span v-for="(item,index) in grid_default" :class="['myfont handle','me-grid-'+(index+1),{active:index==gridActive}]" @click="onGridDefault(index)"><p>{{item.label}}</p></span>
        </el-form-item>
        <el-form-item label="自定义">
            <moduleEdit :config="config" @onAcitve="onAcitve" @onAdd="onAddimg" @onDel="onDel"></moduleEdit>
        </el-form-item>
        <el-form-item label="魔方密度">
            <el-select v-model="config.row" @change="rowSize">
                <el-option label="4x4" :value="4" />
                <el-option label="5x5" :value="5" />
                <el-option label="6x6" :value="6" />
            </el-select>
            <p style="color: #999">切换后已有图片将清除！</p>
        </el-form-item>
        <el-form-item label="图片">
            <mode-upimg :uplist="config.list" :action="store.api + store.upfile" :options="upOptions">
                <template #default="{evItem}">
                    <myselect :config="evItem" />
                </template>
            </mode-upimg>
            <!-- <el-button type="primary" @click="onAddimg">新增图片</el-button> -->
        </el-form-item>
        <el-form-item label="总宽度">
            <el-input type="number" v-model="config.width">
                <template #append>
                    <el-select v-model="config.width_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                        <el-option label="%" value="%" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="总高度">
            <el-input type="number" v-model="config.height">
                <template #append>
                    <el-select v-model="config.height_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="圆角">
            <el-slider v-model="config.borderRadius" :max="200" />
        </el-form-item>
        <el-form-item label="间距">
            <el-slider v-model="config.padding" :max="150" />
        </el-form-item>
        <el-form-item label="颜色">
            <el-color-picker v-model="config.backgroundColor" />
        </el-form-item>
        <el-form-item label="启用动画">
            <el-switch v-model="config.animation" />
        </el-form-item>
        <!-- <el-form-item label="自定义项">
            <el-input type="text" v-model="config.define" />
        </el-form-item> -->
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>
    </el-form>

</template>

<style scoped>
    @import "/src/assets/fonts/myfont.css";
    .myfont{font-size: 30px;color: #666; text-align: center;margin: 0 10px 5px 0;}
    .myfont p{font-size: 12px;color: #999;}
    .myfont.active{color: dodgerblue;}
</style>